<template>
  <div class="root">
    <!-- 头部区域 -->
    <Header />

    <!-- 这个 div 是个容器，用来盛放 Main 和 Aside 组件 -->
    <div class="root-container">
      <Main />
      <Aside />
    </div>
  </div>
</template>

<script setup>
import Header from './components/Header.vue'
import Main from './components/Main.vue'
import Aside from './components/Aside.vue'
</script>

<style scoped>
.root {
  width: 100%;
  height: 100%;
  background-color: #aaaaaa;
  padding: 10px;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.root-container {
  flex: 1;

  display: flex;
  gap: 10px;
}
</style>
